{extend name="public:layout" /}
{block name="title"}添加扩展属性{/block}
{block name="head"}
{:widget('common/Form/icheckRes')}
{:widget('common/Form/validRes')}
<script src="/public/plugins/template/template.js"></script>
{/block}
{block name="body"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox">
        <div class="ibox-title">
            <ol class="breadcrumb">
                <li><i class="fa fa-hand-o-right"></i> <a href="{:url('index')}"> 扩展属性列表</a></li>
                <li class="active">添加扩展属性</li>
            </ol>
        </div>
        <div class="ibox-content">
            <form method="post" class="form-horizontal" id="form">
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">扩展属性名称</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" placeholder="请输入扩展属性名称"
                               name="extend_name" value="" datatype="*"/>
                    </div>
                    <label class="col-sm-2 control-label Validform_label">排序</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control"
                               name="extend_sort" value="0" datatype="n"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">扩展属性值</label>
                    <div class="col-sm-10">
                        <table class="table">
                            <thead>
                            <tr>
                                <th width="120">属性值</th>
                                <th width="120">展现形式</th>
                                <th>选择项数据【逗号','分割】</th>
                                <th width="120">默认值</th>
                                <th width="80">是否搜索</th>
                                <th width="80">排序</th>
                                <th width="120">操作</th>
                            </tr>
                            </thead>
                            <tr>
                                <td><input type="text" id="ipt_item_name" class="form-control" /> </td>
                                <td>
                                    <select id="ipt_item_type" class="form-control">
                                        <option value="radio">单选框</option>
                                        <option value="checkbox">复选框</option>
                                        <option value="select">下拉框</option>
                                        <option value="text">文本框</option>
                                    </select>
                                </td>
                                <td><input type="text" id="ipt_item_value" class="form-control" /> </td>
                                <td><input type="text" id="ipt_item_default" class="form-control" /> </td>
                                <td>
                                    <select id="is_search" class="form-control">
                                        <option value="0">否</option>
                                        <option value="1">是</option>
                                    </select>
                                </td>
                                <td><input type="text" id="ipt_item_sort" class="form-control" value="0" /></td>
                                <td><a class="btn btn-primary" href="javascript:;" onclick="addItem(this);">添加属性值</a></td>
                            </tr>
                            <tbody id="itemList"></tbody>
                        </table>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                        <button class="btn btn-primary"
                                onclick="ajaxSubForm();" type="submit">
                            保存内容
                        </button>
                        <a href="{:url('index')}" class="btn btn-white">取消</a>
                        <span id="validError"></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{literal}
<script id="itemListTpl" type="text/html">
    {{each list as value i}}
    <tr>
        <td><input type="text" class="form-control itemName" name="item[{{i}}][item_name]" value="{{value.item_name}}" /></td>
        <td>
            {{value.item_type}}<input type="hidden" name="item[{{i}}][item_type]" value="{{value.item_type}}" />
        </td>
        <td><input type="text" class="form-control" name="item[{{i}}][item_value]" value="{{value.item_value}}" /></td>
        <td><input type="text" class="form-control" name="item[{{i}}][item_default]" value="{{value.item_default}}" /></td>
        <td>{{value.is_search}}<input type="hidden" name="item[{{i}}][is_search]" value="{{value.is_search}}" /></td>
        <td><input type="text" class="form-control" name="item[{{i}}][item_sort]" value="{{value.item_sort}}" /></td>
        <td><a href="javascript:;" onclick="del(this)">删除</a></td>
    </tr>
    {{/each}}
</script>
{/literal}
{/block}
{block name="script"}
<script type="text/javascript">
    var data={"list" : []};
    var render = template('itemListTpl');
    $(function () {
        iCheck();
    })
    //添加属性值
    function addItem() {
        var item_name = $("#ipt_item_name").val();
        var item_type = $("#ipt_item_type").val();
        var item_value = $("#ipt_item_value").val();
        var item_default = $("#ipt_item_default").val();
        var is_search = $("#is_search").val();
        var item_sort = $("#ipt_item_sort").val();
        if(item_name==''){
            top.layer.alert('属性值不能为空！');
            return false;
        }
        if(isNaN(item_sort)){
            top.layer.alert('排序必须位数字！');
            return false;
        }
        var isAdd = true;
        $.each(data.list, function(i, val){
            if(val.item_name == item_name){
                isAdd = false;
                return false;
            }
        });
        if(isAdd==false){
            top.layer.alert('该属性已存在！');
            return false;
        }
        data.list.push({"item_name" : item_name,"item_type" : item_type,"item_value" : item_value,"item_default":item_default,"is_search" : is_search,"item_sort":item_sort});
        createHtml(data);
        //重置输入框
        $("#ipt_item_name").val('');
        $("#ipt_item_value").val('');
        $("#ipt_item_default").val('');
        $("#ipt_item_sort").val('0');
    }
    //删除属性
    function del(obj) {
        var itemNameObj = $(obj).closest('tr').find('.itemName');
        var itemName = itemNameObj.val();
        $.each(data.list, function(i, val){
            if(val.item_name == itemName){
                data.list.splice(i,1);
                return false;
            }
        });
        createHtml(data);
    }
    //编译模板
    function createHtml(data) {
        $('#itemList').html(render(data));
    }
</script>
{/block}